import React, { useState } from "react";

function App() {
    const [list, setlist] = useState([1,2,3,4,5]);  // 注意 setList 首字母大写（React 约定）

    const [text,settext] = useState("")

    const changelist=()=>{
        const copylist = [...list]
        copylist.push(text)
        setlist(copylist)
        settext('')
        
    }
    const del=(index)=>{
        const copylist = [...list]

        copylist.splice(index,1)
        setlist(copylist)
    }

    return (
        <div>
            <p>{list}</p>
            <input type='text' value={text} onChange={(event)=>{
                settext(event.target.value)
            }}></input>
            <button onClick={changelist}>修改list</button>
            <ul>
                {
                    list.map((item,index)=>{
                        return(
                            <li>{item}
                            <button
                            onClick={()=>{del(index)}}
                            >删除</button>
                            </li>
                        )
                    })
                }
            </ul>

        </div>
    );
}

export default App;